import _ from 'lodash';
import * as React from 'react';
import {observer} from 'mobx-react';
import {TreeSelect, Form} from 'antd';
import {toJSDeep} from '../../pages/common/store/Store';
import './TreeSelectedStyle.less';

const FormItem = Form.Item;

@observer
export class TreeSelectItem extends React.Component<{ label: string, filedName: string, labelCol: any, wrapperCol: any, store: any, treeData: any, onChange: Function, multiple: boolean, treeCheckable: boolean }, any> {
    onChange = (value, label?, extra?) => {
        this.props.onChange(value, extra);
    }

    getPopupContainer: any = function (className) {
        return function () {
            return document.querySelector(`.${className}`);
        }
    }

    render() {
        let {store, treeData, filedName, label, labelCol, wrapperCol, treeCheckable = true, multiple = true} = this.props;
        const item = store.fields[filedName];
        const className = _.uniqueId(`${filedName}_`);

        const tProps = {
            treeData: treeData,
            value: toJSDeep(item.value),
            onChange: this.onChange,
            multiple: multiple,
            treeCheckable: treeCheckable,
            placeholder: '请选择区域',
            treeNodeFilterProp: 'label',
            dropdownStyle: {maxHeight: 400, overflow: 'auto', width: '100%'},
            getPopupContainer: this.getPopupContainer(className),
            style: {width: '100%'}
        };

        return (
            <FormItem className={className}
                      label={label}
                      labelCol={labelCol}
                      wrapperCol={wrapperCol}
                      hasFeedback={item.hasFeedback}
                      required={item.required}
                      help={item.help}
                      validateStatus={item.validateStatus}>
                <TreeSelect {...tProps} />
            </FormItem>
        )
    }
}
